<template>
  <div class="area">
    <Search :search-name="searchName" @sendInfo="sendInfoFn" />
    <el-card>
      <AllTable :add-info="'新增库区'" :data-list="areaInfo.records" :header-list="headerList">
        <!-- 表格导入 -->
        <template v-slot:importXls>
          <el-button type="info" round plain @click="downLoadMode">下载库位模板</el-button>
          <el-button type="info" round plain @click="downLoadInfo">下载库区信息</el-button>
          <el-button type="info" round plain @click="exportInfo">导入库区信息</el-button>
        </template>
        <!-- 操作 -->
        <template #operation="{ row }">
          <el-button type="info" size="mini" @click.native="aditInfo(row.id)">编辑</el-button>
          <el-button size="mini" type="primary" @click.native="preventUse(row)">停用</el-button>
          <el-button type="danger" size="mini" @click.native="deleteInfo">删除</el-button>
        </template>
      </AllTable>
      <Pagination :search-task-list="areaInfo" @currentSizeChange="(value) => (listInfoParams.size = value)" @currentPageChange="(value) => (listInfoParams.current = value)" />
    </el-card>
    <el-dialog title="提示" center :visible="dialogVisible" width="30%" @close="handleClose">
      <ImportExcel />
    </el-dialog>
  </div>
</template>

<script>
import { pageDetailAPI } from '@/api'
import Search from '../components/Search.vue'
import ImportExcel from './components/ImportExcel.vue'
export default {
  name: 'Area',
  components: {
    Search,
    ImportExcel
  },
  data() {
    return {
      // 弹窗
      dialogVisible: false,
      // 搜索框名称
      searchName: ['仓库名称', ' 库区名称', '仓库状态'],
      // 参数
      listInfoParams: {
        id: '',
        name: '',
        status: null,
        current: 1,
        size: 10,
        warehouseName: ''
      },
      // 列表数据
      areaInfo: {
        records: []
      },
      // 表头数据
      headerList: [{ index: '序号' }, { warehouseName: '所属仓库' }, { code: '库区编号' }, { name: '库区名称' }, { temperatureType: '温度类型' }, { bearingType: '承重类型' }, { useType: '用途属性' }, { status: '库区状态' }, { createName: '负责人' }, { phone: '联系电话' }, { includedNum: '库位数量' }, { updateTime: '更新时间' }, { operation: '操作' }],
      // 重型,轻型
      bearingType: {
        ZX: '重型',
        QX: '轻型',
        BX: '轻型'
      },
      // 状态 0 停用 1启用
      status: {
        0: '停用',
        1: '启用'
      },
      // 温度类型
      temperatureType: {
        CW: '常温',
        LC: '冷藏',
        HW: '恒温'
      },
      // 用途类型
      useType: {
        RKHCQ: '入库缓存区',
        CKHCQ: '出库缓存区',
        CCQ: '存储区',
        FJQ: '分拣区'
      }
    }
  },
  watch: {
    listInfoParams: {
      handler() {
        this.fetchAreaInfo()
      },
      deep: true
    }
  },
  created() {
    this.fetchAreaInfo()
  },
  methods: {
    // 获取表单数据
    async fetchAreaInfo() {
      const res = await pageDetailAPI(this.listInfoParams)
      res.data.records.forEach((item) => {
        item.bearingType = this.bearingType[item.bearingType]
        item.status = this.status[item.status]
        item.temperatureType = this.temperatureType[item.temperatureType]
        item.useType = this.useType[item.useType]
      })
      this.areaInfo = res.data
    },
    sendInfoFn(value) {
      this.listInfoParams = {
        warehouseName: value.code,
        name: value.name,
        status: value.status,
        current: 1,
        size: 10,
        id: ''
      }
    },
    // 编辑
    aditInfo(editid) {
      this.$router.push({
        name: 'editdetails',
        params: {
          editid
        }
      })
    },
    // 停用
    preventUse(value) {
      console.log(value)
    },
    // 删除提示
    deleteInfo() {
      this.$notify({
        title: '提示',
        message: '演示系统，不支持此操作',
        type: 'warning',
        offset: 80,
        duration: 2000
      })
    },
    // 下载库区模板
    downLoadMode() {
      // console.log('下载库区模板')
      import('@/vendor/Export2Excel').then((excel) => {
        const headerArr = ['所属仓库名称', '所属库区名称', '库位名称', '温度类型', '承重类型', '用途属性', '停用状态', '承载体积（m3）', '承载上限', '承载重量', '库位排', '库位列', '库位层', '库位长', '库位宽', '库位高']
        excel.export_json_to_excel({
          // 表头 header 必填，是一个数组
          // 表头 header 必填，是一个数组
          header: headerArr,
          // 表格 body 具体数据，是一个二维数组
          data: [['', '', '', '常温', '轻型货架', '入库缓存区', '可用']],
          filename: '库区模板', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },
    // 下载库区信息
    downLoadInfo() {
      import('@/vendor/Export2Excel').then((excel) => {
        const headerArr = ['所属仓库', '库区编号', '库区名称', '温度类型', '承重类型', '用途属性', '库区状态', '负责人', '联系电话', '库位数量', '更新时间']
        // // 中英对照关系
        const headerRelation = {
          所属仓库: 'warehouseName',
          库区编号: 'code',
          库区名称: 'name',
          温度类型: 'temperatureType',
          承重类型: 'bearingType',
          用途属性: 'useType',
          库区状态: 'status',
          负责人: 'createName',
          联系电话: 'phone',
          库位数量: 'includedNum',
          更新时间: 'updateTime'
        }
        const twoArr = this.getExportData(this.areaInfo.records, headerArr, headerRelation)
        excel.export_json_to_excel({
          // 表头 header 必填，是一个数组
          // 表头 header 必填，是一个数组
          header: headerArr,
          // 表格 body 具体数据，是一个二维数组
          data: twoArr,
          filename: '库区信息', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },
    // 导入库区信息
    getExportData(rows, headerArr, headerRelation) {
      // [{}, {}]
      // [[],[]]
      // 1、定义一个结果数组
      // 2、将结果数组返回
      // 3、写逻辑部分
      //   1）、定义一个子数组
      //   2）、遍历原始数据拿到每个对象
      //   3）、遍历表头拿到每一个中文的表头
      //   4）、定义一个英文的key 通过headerRelation[中文的表头] 进行赋值
      //   5）、通过item[英文的key]取出对应value 并push到子数组
      //   6）、将子数组push到结果数组中
      const resArr = []
      rows.forEach((item) => {
        const oneArr = []
        headerArr.forEach((key) => {
          const enKey = headerRelation[key]
          oneArr.push(item[enKey])
        })
        resArr.push(oneArr)
      })
      return resArr
    },
    exportInfo() {
      console.log('导入库区信息')
      this.dialogVisible = true
    },
    // 弹窗关闭
    handleClose() {
      console.log('弹窗关闭')
    }
  }
}
</script>

<style></style>
